<template>
	<!-- 商品组 -->
	<view class="diy-sharingGoods" :style="{ background: itemStyle.background }">
		<view class="goods-item" v-for="(dataItem, index) in dataList" :key="index">
			<form @submit="onTargetGoods" report-submit="true" :data-id="dataItem.goods_id">
				<button formType="submit" class="btn-normal dis-flex" >
					<!-- 商品图片 -->
					<view class="goods-item_left"><image class="image" mode="aspectFill" :src="dataItem.image"></image></view>
					<view class="goods-item_right">
						<!-- 商品名称 -->
						<view v-if="itemStyle.show.goodsName" class="goods-item_title twolist-hidden">
							<text>{{ dataItem.goods_name }}</text>
						</view>
						<view class="goods-item_desc">
							<!-- 商品卖点 -->
							<view v-if="itemStyle.show.sellingPoint" class="desc-selling_point onelist-hidden">
								<text>{{ dataItem.selling_point }}</text>
							</view>
							<!-- 拼团信息 -->
							<view class="desc-situation">
								<text class="iconfont icon-pintuan_huaban"></text>
								<text class="people">{{ dataItem.people }}人团</text>
								<text class="col-9">已有{{ dataItem.goods_sales }}人进行拼团</text>
							</view>
							<!-- 商品价格 -->
							<view class="desc_footer">
								<text class="price_x" v-if="itemStyle.show.sharingPrice">¥{{ dataItem.sharing_price }}</text>
								<text class="price_y col-9" v-if="itemStyle.show.linePrice && dataItem.line_price > 0">¥{{ dataItem.line_price }}</text>
							</view>
						</view>
						<view class="btn-settlement">去拼团</view>
					</view>
				</button>
			</form>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object,
		dataList: Array
	},
	data() {
		return {};
	},
	methods: {
		onTargetGoods(e) {
			// 记录formid
			this.$saveFormId(e.detail.formId);
			console.log(e)
			Route.navigateTo({
				url: '/pages/sharing/goods/index?goods_id=' + e.currentTarget.dataset.id
			});
		}
	}
};
</script>

<style>
/* common.wxss */
/* @import "/utils/common.wxss"; */

/* 商品组 */

.diy-sharingGoods {
	padding: 20rpx;
}

.goods-item {
	height: 320rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	background: #fff;
}

.goods-item:last-child {
	margin-bottom: 0;
}

/* 商品图片 */

.goods-item_left {
	display: flex;
	width: 40%;
	background: #fff;
	align-items: center;
}

.goods-item_left .image {
	display: block;
	width: 240rpx;
	height: 240rpx;
}

.goods-item_right {
	position: relative;
	width: 60%;
}

/* 商品名称 */

.goods-item_right .goods-item_title {
	height: 72rpx;
	margin-top: 20rpx;
	font-size: 28rpx;
	line-height: 1.3;
	color: #333;
}

.goods-item_desc {
	margin-top: 16rpx;
}

/* 商品卖点 */

.desc-selling_point {
	width: 400rpx;
	/* height: 40rpx; */
	font-size: 24rpx;
	line-height: 1.4;
	color: #ff495e;
}

/* 拼团信息 */

.desc-situation {
	margin-top: 12rpx;
	font-size: 24rpx;
	line-height: 1.3;
	color: rgb(240, 60, 60);
}

.desc-situation .people {
	margin: 0 12rpx;
}

/* 商品价格 */

.desc_footer {
	margin-top: 12rpx;
	font-size: 24rpx;
}

.desc_footer .price_x {
	margin-right: 16rpx;
	color: rgb(240, 60, 60);
	font-size: 28rpx;
}

.desc_footer .price_y {
	text-decoration: line-through;
}

/* 去拼团按钮 */

.goods-item .btn-settlement {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 28rpx;
	border-radius: 40rpx;
	background: linear-gradient(to right, rgb(235, 53, 107) 0%, rgb(240, 60, 60) 100%);
	box-shadow: 0 4rpx 20rpx -4rpx rgb(235, 53, 107);
	font-size: 28rpx;
	line-height: 54rpx;
	text-align: center;
	color: #fff;
}
</style>
